{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}剔除信用卡还款后的消费{% endblock %}

{% block page_content %}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./static/js/my_js.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<br class="form-inline" action="" method="post" name="">
<form action="/cost_recenty_info" method="post" name="postinfo">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

    <div class="form-row">
			<div class="col-md-12 ">
				
				<div class="form-group">
					
        	<div class="col-md-3">
        		<label>收支一级类别</label>
        		<select class="form-control" name="income_expense_class_id" onchange="show_income_expense_id()" id="income_expense_class_id" style="width: 100%" required/>
        				<option value="-1">--请选择--</option>
        				{% if income_expense_class_json %}
                    {% for info in income_expense_class_json %}
                        <option value="{{ info.get('id') }}">{{ info.get('type_name') }}</option>
                    {% endfor %}
                {% endif %}
        		</select>
        	</div>
        	
        	
        	<div class="col-md-3">
        		<label>收支二级类别</label>
        		<select class="form-control" name="income_expense_id" id="income_expense_id" disabled="disabled" style="width: 100%" required/>
        			<option value="-1">--请选择--</option>
        		</select>
        	</div>
        	

        <div class="form col-md-2">
            <label>支付方式</label>
            <select name="pay_channel_id" class="form-control"  style="width: 100%" required/>
            <option value="-1">--请选择--</option>
                 {% if pay_channel_json %}
                    {% for info in pay_channel_json %}
                        <option value="{{ info.get('id') }}">{{ info.get('name') }}</option>
                    {% endfor %}
                {% endif %}
            </select>
        </div>
                	
        	<div class="col-md-2">
        		<label>支付来源</label>
        		<select class="form-control" name="account_class_id" onchange="show_account_id({{ user_id }})" id="account_class_id"  style="width: 100%" required/>
        				<option value="-1">--请选择--</option>
        				{% if account_class_json %}
                    {% for info in account_class_json %}
                        <option value="{{ info.get('id') }}">{{ info.get('name') }}</option>
                    {% endfor %}
                {% endif %}
        		</select>
        	</div>


        	<div class="col-md-2">
        		<label>账户名称</label>
        		<select class="form-control" name="account_id" id="account_id" disabled="disabled"  style="width: 100%" required/>
        			<option value="-1">--请选择--</option>
        		</select>
        	</div>


        </div>


        <div class="form-group">


        <div class="form col-md-2">
            <label>开始年份</label>
            <select name="begin_year" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in years_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>开始月份</label>
            <select name="begin_month" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in months_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

         <div class="form col-md-2">
            <label>开始日</label>
            <select name="begin_day" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in days_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>结束年份</label>
            <select name="end_year" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in years_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>结束月份</label>
            <select name="end_month" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in months_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

         <div class="form col-md-2">
            <label>结束日</label>
            <select name="end_day" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in days_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-1 col-md-offset-0" >
        	<button type="submit" class="btn btn-primary">提交</button>
        </div>

			</div>
			
			</div>

    </div>

    

  </form>

    <br><br>


    <div id="main1" style="top: 100px;width: 800px;height:500px;margin: 0 auto;"></div>
    <div id="main2" style="top: 120px;width: 800px;height:500px;margin: 0 auto;"></div>

    <script type="text/javascript">

        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var url_bar = "/api/cost_recenty/".concat({{ user_id }}, "?income_expense_class_id=", {{ income_expense_class_id }}, "&income_expense_id=", {{ income_expense_id }}, "&pay_channel_id=", {{ pay_channel_id }}, "&account_class_id=", {{ account_class_id }}, "&account_id=", {{ account_id }}, "&begin_year=", {{ begin_year }}, "&begin_month=", {{ begin_month }}, "&begin_day=", {{ begin_day }}, "&end_year=", {{ end_year }}, "&end_month=", {{ end_month }}, "&end_day=", {{ end_day }})
        var url_pie = "/api/cost_recenty_class/".concat({{ user_id }}, "?pay_channel_id=", {{ pay_channel_id }}, "&account_class_id=", {{ account_class_id }}, "&account_id=", {{ account_id }}, "&begin_year=", {{ begin_year }}, "&begin_month=", {{ begin_month }}, "&begin_day=", {{ begin_day }}, "&end_year=", {{ end_year }}, "&end_month=", {{ end_month }}, "&end_day=", {{ end_day }})

        $.get(url_pie).done(function (data){
        console.log(data)
        data = data.data[0]
        myChart2.setOption({
          title: {
                text : '剔除信用卡还款后的消费构成',
                x: 'center',
                },
          tooltip: {
            trigger: 'item',
            formatter: "{b}<br/>{c}元 {d}%"
          },
		    calculable : true,

          series: [{
            type: 'pie',
            clockwise:'true',
            startAngle:'0',
            data: data
          },]

        });
        });

        $.get(url_bar).done(function (data){
        myChart1.setOption({
          title: {
                text : '剔除信用卡还款后的消费走势',
                x: 'center',
                y: 'top'
                },
          tooltip: {
            trigger: 'item',
            formatter: "{b}: {c}元"
          },
          xAxis: {
            name: '日期',
            nameLocation: "middle",
            nameGap: 20,
            type: 'category',
            data: data['date']
          },
          yAxis: {
                name: '消费金额（元）',
                nameLocation: "middle",
                nameGap: 60,
                type: 'value'
                },
          series: [{
            name: '消费金额',
            type: 'bar',
            data: data['money']
          },]

        });
        });


    </script>
    <br></br>
<br></br>
<br></br>
<tr>
    <td><a href="1000">餐饮</a></td>
    <td><a href="1000">线下购物</a></td>
    <td><a href="1000">线上购物</a></td>
    <td><a href="1000">住房物业</a></td>
    <td><a href="1000">交通出行</a></td>
    <td><a href="1000">通讯物流</a></td>
    <td><a href="1000">休闲娱乐</a></td>
    <td><a href="1000">人情往来</a></td>
    <td><a href="1000">旅行外出</a></td>
    <td><a href="1000">金融保险</a></td>
    <td><a href="1000">文体教育</a></td>
    <td><a href="1000">医药保健</a></td>
    <td><a href="1000">杂项</a></td>

</tr>
{% endblock %}
